// 设置cookie
function set_cookie(key, val){
    let d = new Date();
    d.setTime(d.getTime()+(24*60*60*1000))
    let expires="expires="+d.toGMTString();
    document.cookie=key+"="+val;
}
// 获得cookie
function get_cookie(key){
    let name = key+'='
    let ca = document.cookie.split(';')
    for(let i=0; i<ca.length; i++)
    {
        let c = ca[i].trim();
        if(c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return ''
}
 // 顶部菜单栏的vue对象
 let header = new Vue({
    el: "#header",
    created() {
        this.clientWidth = document.body.clientWidth;
        if (this.clientWidth >= this.needWidth) {
            this.isShowTopMenu = true
        } else {
            this.isShowTopMenu = false
        }
    },
    data: {
        isShowTopMenu: false,
        menuItem: [{ name: "首页", kind: 101 },
        { name: "手机", kind: 1 },
        { name: "电脑", kind: 2 },
        { name: "平板", kind: 3 },
        { name: "服饰", kind: 4 }
        ],
        clientWidth: document.body.clientWidth,
        needWidth: 1150,
        // 搜索关键字
        key: "",
        // 是否显示个人主页
        isShowLoginAndRegist: false

    },
    mounted() {
        this.watchWidth()
    },
    methods: {
        watchWidth() {
            window.onresize = () => {
                return (() => {
                    window.screenWidth = window.innerWidth
                    this.clientWidth = window.screenWidth
                })()
            }
        },
        showWindow(val) {
            pop.isShowPopWindow = true;
            if (val == 1) {
                pop.isShowLoginWindow = true;
            } else if (val == 2) {
                pop.isShowLoginWindow = false;
            }
        },
        toSearch(key, kind) {
            // kind=0表示是全类型搜索  
            if(kind==0){
                key=this.key
            }  
            window.location='search.html?key='+key+'&kind='+kind;
        },
        // 返回个人主页
        toHome(){
            if(get_cookie('user_id').length>0)
                window.location='user_info.html';
            else{
                this.check_login();
            }
        },
        check_login() {
            if (get_cookie('user_id').length > 0) {
                this.isShowLoginAndRegist = true;
            }else{
                this.isShowLoginAndRegist=false;
            }
        },
        // 注销登陆
        shutdowm(){
            set_cookie('user_id','')
            this.check_login()
        }
    },
    watch: {
        clientWidth(val) {

            if (val >= this.needWidth) {
                this.isShowTopMenu = true
            } else {
                this.isShowTopMenu = false
            }
        },
        isShowTopMenu() {
            console.log("当前页面宽度变化达到阈值，改变顶部栏的样式。");
        }
    }

})
// 弹出窗口的vue对象
let pop = new Vue({
    el: "#pop",
    data: {
        isShowPopWindow: false,
        isShowLoginWindow: false,
        // 注册对象
        regist: {
            name: "",
            number: 110,
            email: "电子邮箱（非必需）",
            password: "用户密码",
            password_again: "再次输入",
            readme: "自述"
        },
        // 登陆对象
        login: {
            user: "",
            password: ""
        }
    },
    computed: {
        toShowLoginWindow() {
            return this.isShowPopWindow && this.isShowLoginWindow
        },
        toShowRegistWindow() {
            return this.isShowPopWindow && !this.isShowLoginWindow
        }
    },
    methods: {
        close() {
            this.isShowPopWindow = false
        },
        regist_function() {
            if (this.regist.name.length <= 0) {
                alert("用户名称必填！")
            } else if (this.regist.password.length <= 0 || this.regist.password_again != this.regist.password) {
                alert("用户密码不能为空，且必须填两次。")
            } else {
                // 往后台写数据
                console.log("用户：" + this.regist.name + ", 尝试注册！");
                set_cookie('user_id', 001)
                header.check_login();
                this.close()
            }
            this.regist.name=""
            this.regist.password="";
            this.regist.password_again=""
            this.regist.number=""
            this.regist.email="";
        },
        login_function() {
            if (this.login.user.length <= 0 || this.login.password.length <= 0) {
                alert("用户名和密码不能为空！")
            } else {
                // 访问后台查询书记
                console.log("用户:" + this.login.user + ",尝试登陆!");
                set_cookie('user_id', 001)
                header.check_login();
                this.close()
            }
            this.login.user="";
            this.login.password=""
        },
        toSearch(key, kind) {
            if (kind == 0) {
                this.$router.push({
                    name: "./search.html",
                    query: {
                        key: key,
                        kind: kind
                    }
                })
            }
        }
    }
})
header.check_login();